Skip to content

Redesign alicetrannp.com as modern, elegant practice site#5881

Open
frankilus wants to merge 9 commits into
rdpeng:masterfrom
frankilus:claude/redesign-modern-website-X3eJV
Open

Redesign alicetrannp.com as modern, elegant practice site#5881
frankilus wants to merge 9 commits into
rdpeng:masterfrom
frankilus:claude/redesign-modern-website-X3eJV

Conversation

@frankilus

Copy link
Copy Markdown

Builds a single-page experience inspired by the original psychiatric NP site, with a warmer, calmer feel: sage/ivory/forest palette, serif display type, whitespace-forward layout, and gentle scroll-reveal motion. Sections cover hero, about, three-promise approach, services, conditions, a quiet pull-quote, curated resources with a visible crisis card, and a contact card with a non-binding form. Responsive down to phones, reduced-motion friendly, no dependencies beyond Google Fonts.

https://claude.ai/code/session_01Ds9RawtHHr3s4S8gq7Ezf7

claude added 9 commits April 17, 2026 03:16
Builds a single-page experience inspired by the original psychiatric NP
site, with a warmer, calmer feel: sage/ivory/forest palette, serif display
type, whitespace-forward layout, and gentle scroll-reveal motion. Sections
cover hero, about, three-promise approach, services, conditions, a quiet
pull-quote, curated resources with a visible crisis card, and a contact
card with a non-binding form. Responsive down to phones, reduced-motion
friendly, no dependencies beyond Google Fonts.

https://claude.ai/code/session_01Ds9RawtHHr3s4S8gq7Ezf7
Alternative palette option, preserving v1 at the repo root. Shifts from
the warm sage/forest/terracotta of v1 to a cooler evening mood: mist,
dusty lavender, deep plum, and champagne-gold accents. Fraunces replaces
Cormorant for a slightly softer, more rounded serif. Layout, copy, and
interactions are identical so the two can be compared side-by-side.

View at /v2/ alongside v1 at /.

https://claude.ai/code/session_01Ds9RawtHHr3s4S8gq7Ezf7
Third palette option sitting alongside v1 (grove) and v2 (twilight).
Warm linen paper with seafoam, slate ocean, and driftwood/soft-coral
accents — meant to feel like a quiet morning at the water. Uses DM
Serif Display for a slightly crisper, more architectural masthead,
plus a subtle layered wave graphic in the hero. Layout, copy, and
interactions match v1 and v2 for fair comparison.

View at /v3/.

https://claude.ai/code/session_01Ds9RawtHHr3s4S8gq7Ezf7
A distinct alternative to v1-v3. Instead of a hero-plus-cards layout,
this variant reads like a small literary quarterly: a printed masthead,
a tall typographic cover with an index, numbered chapters, drop caps on
opening paragraphs, a margin note, a full-width pull quote, a menu-style
services list, an inline serif list of conditions, an essay-shelf for
resources, a black crisis block, and a closing letter with a stamped
contact form. Playfair Display for display, EB Garamond for body,
Inter for small-caps utility. Warm bone-paper palette with rust and
muted sage accents, plus a subtle paper-texture background.

View at /v4/.

https://claude.ai/code/session_01Ds9RawtHHr3s4S8gq7Ezf7
Direct answer to feedback that the current hero reads like an interior-
design ad. This variant puts the clinician in the frame instead of the
furniture: an editorial split hero with a large portrait card on the
right (swap the SVG placeholder for a real headshot when ready), two
floating trust badges anchored to the card, and a decisive left column
with a big headline, a clear three-line credibility row, and a stat
strip below the fold. Full sticky nav matches the existing site's
information architecture (About / Services / Rates / Conditions / Blog /
FAQ / Contact + Join Visit + Book Now).

Palette keeps the warm sage/cream family but shifts the primary to a
deeper botanical green and adds a small coral accent for CTAs and
markers, so the mood reads clinical-warm rather than spa-staged.

View at /v5/.

https://claude.ai/code/session_01Ds9RawtHHr3s4S8gq7Ezf7
Per feedback, remove the practitioner image from the hero entirely.
The right-side card is now an abstract sunrise composition — layered
horizon arcs, a rising sun, and drifting particles in the same sage/
forest/coral palette — evoking hope and calm without depicting a
person or an interior. The floating credential badges (15+ years,
board-certified) are retained since they carry trust, not decor.
Removed the now-unused portrait caption styles.

https://claude.ai/code/session_01Ds9RawtHHr3s4S8gq7Ezf7
Recreates the existing live hero design as closely as possible (top
accent bar, leaf-logo nav with Join Visit / Book Now pills, centered
kicker, 'Feel like yourself again.' headline with italic accent, three
icon features, dual CTAs, timing note, and the floating question chat
pill) while swapping only the background: the interior/waiting-room
photograph is replaced with a soft watercolor-wash sky, faint hills,
gently swaying botanical fronds, and a light center vignette to keep
the text readable. Everything else about the layout is preserved so it
can be compared one-to-one against the live site.

View at /v6/.

https://claude.ai/code/session_01Ds9RawtHHr3s4S8gq7Ezf7
Keeps the live site's hero layout untouched (nav, kicker, headline,
feature icons, CTAs, chat pill) and replaces the background with a
more visually distinctive animated scene: a breathing sun halo with
three slowly expanding concentric rings centered behind the headline,
three blurred ribbon currents in amber/sage/gold drifting across the
page, and soft light motes floating upward. Adds two small signature
touches — a slowly drifting gradient on the top accent bar and a
hand-drawn brush underline beneath 'yourself' in the headline. A
center vignette preserves text contrast, and all motion respects
prefers-reduced-motion.

View at /v7/. v6 (quiet botanical version) retained for comparison.

https://claude.ai/code/session_01Ds9RawtHHr3s4S8gq7Ezf7
Same layout as the live site; the background is now an abstract lotus
pond. The lotus — Vietnam's national flower and a symbol of resilience
rising clean from muddy water — carries the cultural note requested.
Three layered wave bands scroll continuously at different speeds to
read as flowing water, dashed current lines shimmer across the surface,
raindrop ripples expand as flattened ellipses for perspective, and two
stylized pink lotus blossoms bob gently on lily pads while a lone pad
drifts slowly across the full width of the pond. The nav logo also
becomes a lotus mark, and the underline flourish beneath 'yourself'
becomes a soft water-line. Vignette preserves text contrast; motion is
disabled cleanly under prefers-reduced-motion; the right blossom and
one ripple are hidden on phones to keep the scene uncluttered.

View at /v8/.

https://claude.ai/code/session_01Ds9RawtHHr3s4S8gq7Ezf7
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants